<template>
<div class="wrapper" >
<swiper>
<swiper-slide v-for="(page,index) of pages" :key="index">
<div class="icons" v-for="item of page" :key="item.id">
	<div class="icons-img">
		<img class="icons-img-content" :src="item.imgUrl" />
	</div>
	<p class="icons-desc">{{item.desc}}</p>
</div>

</swiper-slide>
</swiper>
</div>
</template>

<script>
export default {
	name:'HomeIcons',
	data (){
		return{
          iconsList:[{
          	id:'0001',
          	imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
          	desc:'景点门票'
          },{
          	id:'0002',
          	imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/12/216ce2e78b5f5f02.png',
          	desc:'万圣狂欢'
          },{
          	id:'0003',
          	imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
          	desc:'景点门票'
          },{
          	id:'0004',
          	imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/12/216ce2e78b5f5f02.png',
          	desc:'万圣狂欢'
          },{
          	id:'0005',
          	imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
          	desc:'景点门票'
          },{
          	id:'0006',
          	imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/12/216ce2e78b5f5f02.png',
          	desc:'万圣狂欢'
          },{
          	id:'0007',
          	imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
          	desc:'景点门票'
          },{
          	id:'0008',
          	imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/12/216ce2e78b5f5f02.png',
          	desc:'万圣狂欢'
          },{
          	id:'0009',
          	imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
          	desc:'景点门票'
          	}]
			
		}
		
	},
	computed:{
		pages (){
			const pages=[]
			this.iconsList.forEach((item,index)=>{
				const page=Math.floor(index/8)
				if(!pages[page]){
					pages[page]=[]
				}
				pages[page].push(item)
			})
			return pages
		}
	
	}
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'

.wrapper
 overflow:hidden
 width:100%
 height:0
 padding-bottom:40%

.icons
 position:relative
 width:25%
 height:0
 padding-bottom:20%

 float:left

.icons-img
 position:absolute
 top:0
 left:.25rem
 width:1.5rem
 height:1.2rem

.icons-img-content

 width:1rem
 height:1rem
 line-height:1rem
 position:absolute
 top:.1rem
 left:.2rem
.icons-desc

 position:absolute
 top:1.2rem
 left:.35rem
 overflow:hidden
 white-space:nowrap
 text-overflow:ellipsis

  
</style>